@import "../../assets/iconfont/iconfont";
@import '../styles/variables';

@mixin loader($width,$stroke-width) {
	position: relative;
	width: $width;
	&:before {
		content: '';
		display: block;
		padding-top: 100%;
	}
	.circular {
		animation: rotate 2.9s linear infinite;
		height: 100%;
		transform-origin: center center;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		.path {
			stroke-width: $stroke-width;
			stroke-miterlimit: 10;
			stroke: #00AAF1;
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
			animation: dash 1.2s linear infinite;
			stroke-linecap: round;
		}
	}
}

cc-loading {
	display: inline-block;

	section {

		.loader {
			@include loader(40px, 3);
			margin-top: 5px;
		}

		p {
			display: none;
		}

		&.layer {
			width: 70px;
			height: 70px;
			background: rgba(224, 224, 224, 0.8);
			border-radius: 5px;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
			align-items: center;
			p {
				display: block;
				font-family: $font;
				font-size: 12px;
				color: #666666;
				margin-bottom: 5px;
			}

		}

	}

}

